<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
    <div :class="{active: isActive, notActive: !isActive}">
        <button @click="isActive = !isActive">
            change
        </button>
    </div>
</div>

<script>
    const {createApp, ref} = Vue

    createApp({
        setup() {
            return {
                isActive: ref(true)
            }
        }
    }).mount('#app')
</script>

<style>
    .active {
        background-color: aqua;
        width: 100px;
        height: 200px;
    }

    .notActive {
        background-color: red;
        width: 200px;
        height: 100px;
    }
</style>
</body>
</html>